import React from 'react'
import { connect } from 'dva'
import { Row,Col } from 'antd'

/**
 * TradeTimeCharts 交易时段统计图
 */
import {IECharts} from '../../../components'
const TradeTimeCharts = ({ 
    data 
   }) => {
    const myProps = {
      option: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        legend: {
          data: ['盈利金额', '开仓次数']
        },
        xAxis: [
          {
            type: 'category',
            name:'交易时间段',
            nameGap:5,
            data: data.map(item => item.interval),
            axisLine:{
              symbol:['none','arrow']
            },
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '金额',
            axisLine:{
              symbol:['none','arrow']
            },
            axisLabel: {
              formatter: '{value} 元'
            }
          },
          {
            type: 'value',
            name: '次数',
            axisLabel: {
              formatter: '{value} 次'
            }
          }
        ],
        series: [
          {
            name: '盈利金额',
            type: 'bar',
            data: data.map(item => item.pnl)
          },
          {
            name: '开仓次数',
            type: 'line',
            yAxisIndex: 1,
            data: data.map(item => item.times)
          }
        ]
      }
    }
      return (
        //  <div style={{ height: 300 }} >
        <div style={{ height: 440 }} >
          <IECharts {...myProps} resizable={true} />
        </div >
      )
   }

   
/**
 * [TradeTime 交易时段统计]
 * 引用组件 
 * TradeTimeCharts 交易时段统计图
 */
import DefinitionList from '../../../components/DefinitionList'
class TradeTime extends React.Component {
  state={
    data:this.props.tradingTimeDistribution
  }

  componentDidMount() {
    this.fetchData(this.props)
  }
  componentWillReceiveProps(nextProps) {
    if((nextProps.begindate!==this.props.begindate)||(nextProps.enddate!==this.props.enddate)||(nextProps.trader!==this.props.trader)){
      this.fetchData(nextProps)
    }
    if(nextProps.tradingTimeDistribution!==this.props.tradingTimeDistribution){
      this.setState({
        data:nextProps.tradingTimeDistribution
      })
    }
  }
  fetchData=(props)=>{
    this.props.dispatch({
      type: `dailyReplay/getTradingTimeDistribution`,
      payload:props
    })
  }
  render() {
    const { data } = this.state
    
    return (
      <Row type="flex" justify="space-around" align="middle" className='tradeTimeCharts'>
        <Col xs={16} sm={16} md={16} lg={16} xl={16}>
          <TradeTimeCharts data={data} />
        </Col>
        <Col xs={8} sm={8} md={8} lg={8} xl={8} className='chartsLegend'>
          {
            data && data.map((item, index) => (
              <DefinitionList
                key={index}
                // icon={<Icon type="caret-right" style={{ color: colors[index] }} />}
                name={`${item.interval}:`}
                value={`开仓${item.times}次 盈利${item.pnl}元`}
              />
            ))
          }
        </Col>
      </Row>
    )
  }
}

TradeTime.defaultProps={
  begindate: null,
  enddate: null,
  trader: null,
  tradingTimeDistribution:[]
}

export default connect()(TradeTime)
